<template>
  <div>
    <item-list></item-list>
    <div class="download">
      <div class="pc">
        <img src="@/assets/img/download/1.png" alt="pcDownload" />
        <div>下载到电脑端</div>
      </div>
      <div class="mobile">
        <img src="@/assets/img/download/2.png" alt="pcDownload" />
        <div>下载到移动端</div>
      </div>
    </div>
    <div class="cd">
      <div class="text">
        <p>千万曲库 首首CD音质</p>
        <p>囊括百万<span class="color">无损SQ音乐</span>，你在用手机听歌时，</p>
        <p>也能感受到纤毫毕现的CD音质，更能免费离线收听</p>
      </div>
      <img src="@/assets/img/download/3.jpg" alt="cd">
    </div>
    <div class="cd left">
      <img src="@/assets/img/download/4.jpg" alt="cd">
      <div class="text">
        <p>千位明星 亲自推荐音乐</p>
        <p>韩红，戴佩妮等<span class="color">千位明星已入驻</span>，</p>
        <p>亲自创建私房歌单，录制独家DJ节目，推荐他们心中的好音乐</p>
      </div>
    </div>
    <div class="cd">
      <div class="text">
        <p>社交关系 发现全新音乐</p>
        <p>你可以<span class="color">关注明星</span>、DJ和好友，</p>
        <p>通过浏览他们的动态、收藏和分享，发现更多全新好音乐</p>
      </div>
      <img src="@/assets/img/download/5.jpg" alt="cd">
    </div>
    <div class="cd left">
      <img src="@/assets/img/download/6.jpg" alt="cd">
      <div class="text">
        <p>手机电脑 歌单实时同步</p>
        <p>只要一个帐号，你就可以同步在手机、电脑上，</p>
        <p>创建、收藏的歌单，<span class="color">随时随地畅享好音乐</span></p>
      </div>
    </div>
    <div class="cd">
      <div class="text">
        <p>听歌识曲 助你疯狂猜歌</p>
        <p>歌曲很动听却不知道歌名，歌名在嘴边却想不起来……</p>
        <p>用<span class="color">听歌识曲</span>功能，几秒钟就知道歌名</p>
      </div>
      <img src="@/assets/img/download/7.jpg" alt="cd">
    </div>
    <div class="erwei">
      <img src="@/assets/img/download/erweima.png" alt="二维码">
      扫描二维码下载
    </div>
    <foot></foot>
  </div>
</template>

<script>
import ItemList from "@/components/content/smallnav/ItemList";
import Foot from "@/components/content/foot/Foot";

export default {
  components: {
    ItemList,
    Foot
  }
};
</script>

<style scoped>
.download {
  display: flex;
  width: 950px;
  height: 450px;
  margin: 100px auto 0;
}
.pc {
  margin-right: 180px;
}
.pc div,
.mobile div {
  width: 300px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  font-size: 20px;
  color: #d51818;
  background-color: #fff;
  border-radius: 30px;
  margin: 30px auto;
  cursor: pointer;
}
.pc div:hover,
.mobile div:hover {
  background-color: #d9d9d9;
}
.download img {
  height: 273px;
}

.cd {
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-top: 1px solid #bbb;
}
.cd img {
  margin: 0 45px;
}
.text p {
  color: #666;
  margin-bottom: 8px;
}
.text p:nth-child(1) {
  font-size: 40px;
  color: #000;
  margin-bottom: 20px;
}
.left {
  background-color: #f8f8f8;
}

.color {
  color: #d51818;
  font-weight: 600;
}

.erwei {
  position: fixed;
  bottom: 150px;
  right: 30px;
  padding: 15px;
  width: 130px;
  height: 150px;
  font-size: 14px;
  background-color: #fff;
  box-shadow: 0 0 20px #333;
  border-radius: 8px;
}
.erwei img {
  width: 100px;
  height: 100px;
  margin-bottom: 5px;
}
</style>